<template>
  <!-- 垃圾分类详情页面 -->
  <view style="width: 100%;">
    <!-- 整个box -->
    <view class="box" >
      <!-- 打卡信息 -->
      <view class="box2">
        <view style="font-size: large;font-weight: bold;color: #6A6A6A;">打卡信息</view>
        <view style="border-bottom: 2rpx solid #c1c1c0;">
          <view class="text">姓名：</view>
          <view class="input">{{ownerUser.name}}</view>
        </view>
        <view style="border-bottom: 2rpx solid #c1c1c0;">
          <view class="text">手机号：</view>
          <view class="input">{{ownerUser.tel}}</view>
        </view>
        <view style="border-bottom: 2rpx solid #c1c1c0;">
          <view class="text">打卡地址：</view>
          <view class="input">{{refuseClassification.address}}</view>
        </view>
        <view style="border-bottom: 2rpx solid #c1c1c0;">
          <view class="text">打卡时间：</view>
          <view class="input">{{refuseClassification.createTime}}</view>
        </view>
        <view style="border-bottom: 2rpx solid #c1c1c0;">
          <view class="text">照片：</view>
          <view class="bxdata" style="display: flex;flex-wrap: wrap;">
            <view v-for="(item,index) in imgList" :key="index" @click="preview(index)" style="width: 48%;margin: 1%;">
              <!-- <view>{{item}}</view> -->
              <image :src="item" style="width: 100%;height: 200rpx;"></image>
            </view>
          </view>
        </view>
        <view style="border-bottom: 2rpx solid #c1c1c0;" v-if="refuseClassification.status=='已通过'">
          <view class="text">获得积分：</view>
          <view class="input">{{refuseClassification.value}}</view>
        </view>
        <view style="border-bottom: 2rpx solid #c1c1c0;" v-if="refuseClassification.status=='未通过'">
          <view class="text">未通过原因：</view>
          <view class="input">{{refuseClassification.noPassReason}}</view>
        </view>
        <view style="border-bottom: 2rpx solid #c1c1c0;" v-if="refuseClassification.status!='审核中'">
          <view class="text">审核时间：</view>
          <view class="input">{{refuseClassification.shenheTime}}</view>
        </view>
        <view style="border-bottom: 2rpx solid #c1c1c0;" v-if="refuseClassification.status=='审核中'">
          <view >请耐心等待审核~</view>
        </view>
      </view>
      
      
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        refuseClassification: {}, //打卡对象信息
        ownerUser: {}, //打卡的业主对象信息
        noPassShow: false,
        passShow: false,
        reason: '',
        jifen: 0,
        imgList: [],
      };
    },
    onLoad(option) {
      console.log(option.id);
      // 获取 垃圾分类打卡 数据
      this.getRefuseClass(option.id);
    },
    methods: {
      async getRefuseClass(id) {
        const {
          data: res
        } = await uni.$http.post('/refuseclassification/getrefuseclassificationlistbyid', id)
        if (res.status !== 200) return uni.$showMsg()
        if (res.data.length === 0) return uni.$showMsg()
        this.refuseClassification = res.data[0].refuseClassification;
        this.ownerUser = res.data[1].ownerUser;
        // 图片url处理
        var tempData = res.data[0].refuseClassification;
        var imgArr = tempData.img.split(";");
        for (var i = 0; i < imgArr.length - 1; i++) { //为了除去最后一个空的，所以是i<imgArr.length-1
          this.imgList[i] = imgArr[i];
        }
      },
      // 实现图片的预览效果
      preview(index) {
        // 调用 uni.previewImage() 方法预览图片
        uni.previewImage({
          // 从指定下标开始预览
          current: index,
          // 所有图片 url 地址的数组
          urls: this.imgList
        })
      }
    }
  }
</script>

<style lang="scss">
  .box {
    padding: 30rpx;
  }

  .box1,
  .box2 {
    // border-radius: 30rpx;
    margin-bottom: 30rpx;
    padding: 25rpx;
    box-shadow: 0 0 15rpx #999999
  }

  .box1>view,
  .box2>view {
    padding: 10rpx;
    display: flex;
    margin-bottom: 10rpx;
    font-family: Microsoft YaHei;

    color: #333333;
  }

  .text {
    width: 30%;
    text-align: left;
    overflow: auto;
  }

  .bxdata {
    width: 60%;
  }


  .submit {
    background-color: #1599FD;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    border-radius: 15rpx;
    line-height: 100rpx;
    height: 100rpx;
  }
</style>
